<template>
  <div style="display: inline;">
    <span :style="{display:isLine?'block':'inline'}" v-for="(item,index) in dictData" :key="index">
        <span class="the_style" v-show="modelValue!=item.value" @click="isDetail?'':editCheck(item.value)">&#9744; </span>
        <span class="the_style" style="font-size: 18px;font-weight: bold;" v-show="modelValue==item.value" @click="isDetail?'':editCheck(0)">&#9745;</span> <span v-html="item.label"></span>
            <slot :name="'name'+item.value"></slot>
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
const emit = defineEmits(['update:modelValue','change'])
type Props = {
    dictData?:any
    modelValue?:string|number|null|undefined
    isLine?:boolean
    isDetail?:boolean
}
let props = withDefaults(defineProps<Props>(),{
    dictData:[],
    modelValue:0,
    isLine:false,
    isDetail:false
})

const editCheck = (val) =>{
    emit("update:modelValue",val)
    emit("change",val)
}
</script>
<style scoped lang="scss">
.the_style{
    margin-left:5px;
    cursor: pointer;
    font-size: 18px;
}
</style>